<template>
    <div>
        <FormBase :form-info="formInfo" :handle-back="handleBack" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import FormBase from '@/components/common/form/FormBase.vue'
import FormContent from '@/entity/form/FormContent'
import FormRow from '@/entity/form/FormRow'
import { FormType, RuleEventType } from '@/entity/enums/CommonType'
import FormItem from '@/entity/form/FormItem'
import RuleInfo from '@/entity/form/RuleInfo'

const router = useRouter()
// 返回上一步
const handleBack = () => {
    router.go(-1)
}

// 表单内容
const initFormInfo = () => {
    // 表单内容
    const row1 = new FormRow('活动名称', 'input', FormType.input, null);
    const row2 = new FormRow('活动区域', 'region', FormType.select, []);
    const regionList = [
        new FormItem('上海', 'shanghai', 'regiom'),
        new FormItem('北京', 'beijin', 'regiom'),
        new FormItem('武汉', 'wuhan', 'regiom')
    ]
    row2.itemArr = regionList;

    const row3 = new FormRow('活动时间', 'date1', FormType.datePicker, null);
    row3.span = 11;

    const row4 = new FormRow('', 'date2', FormType.timePicker, null);
    row4.span = 11;

    const row5 = new FormRow('及时配送', 'delivery', FormType.switch, false);
    const row6 = new FormRow('活动性质', 'type', FormType.checkbox, []);
    const typeList = [
        new FormItem('餐厅线上活动', 'foot', 'type'),
        new FormItem('地推活动', 'ditan', 'type'),
        new FormItem('线下主题活动', 'xianxia', 'type'),
        new FormItem('单纯品牌曝光', 'pinpai', 'type'),
    ]
    row6.itemArr = typeList;

    const row7 = new FormRow('特殊资源', 'resource', FormType.radio, null);
    const resourceList = [
        new FormItem('线上品牌商赞助', 'xianshang', 'resource'),
        new FormItem('线下场地免费', 'xiaxia', 'resource')
    ];
    row7.itemArr = resourceList;

    const row8 = new FormRow('活动形式', 'info', FormType.textarea, null);

    const rowList = [row1, row2, row3, row4, row5, row6, row7, row8];

    const formContent = new FormContent('新建表单', rowList);
    // 规则
    const input = [
        new RuleInfo('请输入活动名称', RuleEventType.blur),
        new RuleInfo('长度在 3 到 5 个字符', RuleEventType.blur),
    ];
    input[1].min = 3;
    input[1].max = 5;

    const region = [new RuleInfo('请选择活动区域', RuleEventType.change)];

    const date1 = [new RuleInfo('请选择日期', RuleEventType.change)];

    const date2 = [new RuleInfo('请选择时间', RuleEventType.change)];

    const type = [new RuleInfo('请至少选择一个活动性质', RuleEventType.change)];
    type[0].type = RuleEventType.array;

    const resource = [new RuleInfo('请至少选择一个活动性质', RuleEventType.change)];

    const info = [new RuleInfo('请至少选择一个活动性质', RuleEventType.change)];

    const rules = {
        input,
        region,
        date1,
        date2,
        type,
        resource,
        info
    }
    formContent.rules = rules;
    // formContent.paramForm = initParamForm();
    return formContent;
}

// 需要传递的数据
const formInfo = reactive<FormContent>(initFormInfo());

// 提交
// const ruleFormRef = ref(formInfo.value.paramForm)
const submitForm = () => {
    // ruleFormRef.value.validate((valid: any): boolean => {
    //     if (valid) {
    //         return true
    //     }
    //     console.log('error submit!!')
    //     return false
    // })
    console.log('提交', formInfo.paramForm)
}

formInfo.submitForm = submitForm;



</script>

<style lang="stylus" scoped>
</style>
